<script setup lang="ts">
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "~icons/ep/refresh";
import { useStockList } from "./utils/hook";

defineOptions({ name: "SystemVerifyStock" });

const tableRef = ref();

const {
  filterForm,
  statusOptions,
  pagination,
  tableData,
  columns,
  loading,
  handleSearch,
  handleResetFilters,
  handlePageChange,
  handleSizeChange,
  statusTagType,
  formatInteger,
  auditStatusLabel,
  auditStatusTag
} = useStockList();
</script>

<template>
  <div class="verify-stock-page">
    <el-form
      :inline="true"
      :model="filterForm"
      class="search-form bg-bg_color w-full pl-4 pt-3 pb-2 overflow-auto"
    >
      <el-form-item label="关键字：" prop="keyword">
        <el-input
          v-model.trim="filterForm.keyword"
          placeholder="核实单号 / 商品名称 / 买卖家"
          clearable
          class="w-[260px]!"
        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select
          v-model="filterForm.status"
          placeholder="全部状态"
          clearable
          class="w-[180px]!"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="handleResetFilters">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title="现货核实列表"
      :columns="columns"
      :tableRef="tableRef"
      @refresh="handleSearch"
      @fullscreen="tableRef.value?.setAdaptive?.()"
    >
      <template #default="{ size, dynamicColumns }">
        <PureTable
          ref="tableRef"
          v-loading="loading"
          row-key="id"
          :columns="dynamicColumns"
          :data="tableData"
          :size="size"
          :pagination="pagination"
          adaptive
          :adaptiveConfig="{ offsetBottom: 48 }"
          @page-current-change="handlePageChange"
          @page-size-change="handleSizeChange"
        >
          <template #product="{ row }">
            <div class="cell-group">
              <div class="cell-group__title">
                {{
                  row.product?.title ||
                  row.snapshot_product?.title ||
                  "未匹配商品"
                }}
              </div>
              <div
                v-if="row.product?.model || row.snapshot_product?.model"
                class="cell-group__meta"
              >
                型号：{{
                  row.product?.model || row.snapshot_product?.model || "-"
                }}
              </div>
              <div v-if="row.snapshot_product?.unit" class="cell-group__meta">
                单位：{{ row.snapshot_product.unit }}
              </div>
              <div v-if="row.product_id" class="cell-group__meta">
                商品ID：{{ row.product_id }}
              </div>
            </div>
          </template>

          <template #buyer="{ row }">
            <div class="info-block">
              <div>
                <span class="info-block__label">买家：</span>
                <span>{{ row.buyer?.name || "未实名买家" }}</span>
                <span v-if="row.buyer?.id" class="info-block__minor">
                  (ID: {{ row.buyer.id }})
                </span>
              </div>
              <div>
                <span class="info-block__label">需求数量：</span>
                <span>{{ formatInteger(row.buyer_qty) }}</span>
              </div>
              <div v-if="row.buyer_remark" class="info-block__remark">
                <span class="info-block__label">备注：</span>
                <el-tooltip
                  placement="top"
                  effect="light"
                  :content="row.buyer_remark"
                >
                  <span class="remark-text">{{ row.buyer_remark }}</span>
                </el-tooltip>
              </div>
              <div
                v-if="
                  (row.buyer_media?.images?.length ?? 0) > 0 ||
                  (row.buyer_media?.videos?.length ?? 0) > 0
                "
                class="info-block__minor"
              >
                附件：图片 {{ row.buyer_media?.images?.length ?? 0 }} 张， 视频
                {{ row.buyer_media?.videos?.length ?? 0 }} 段
              </div>
              <div class="info-block__minor">
                提交时间：{{ row.buyer_time || "-" }}
              </div>
            </div>
          </template>

          <template #seller="{ row }">
            <div class="info-block">
              <div>
                <span class="info-block__label">卖家：</span>
                <span>{{ row.seller?.name || "-" }}</span>
                <span v-if="row.seller?.org_id" class="info-block__minor">
                  (组织ID: {{ row.seller.org_id }})
                </span>
              </div>
              <div>
                <span class="info-block__label">确认数量：</span>
                <span>{{ formatInteger(row.seller_qty) }}</span>
              </div>
              <div v-if="row.seller_remark" class="info-block__remark">
                <span class="info-block__label">说明：</span>
                <el-tooltip
                  placement="top"
                  effect="light"
                  :content="row.seller_remark"
                >
                  <span class="remark-text">{{ row.seller_remark }}</span>
                </el-tooltip>
              </div>
              <div
                v-if="
                  (row.seller_media?.images?.length ?? 0) > 0 ||
                  (row.seller_media?.videos?.length ?? 0) > 0
                "
                class="info-block__minor"
              >
                附件：图片 {{ row.seller_media?.images?.length ?? 0 }} 张， 视频
                {{ row.seller_media?.videos?.length ?? 0 }} 段
              </div>
              <div class="info-block__minor">
                卖家响应：{{ row.seller_time || "-" }}
              </div>
            </div>
          </template>

          <template #audit="{ row }">
            <div class="info-block">
              <div>
                <span class="info-block__label">运营：</span>
                <span>{{ row.assist_user?.name || "未分配" }}</span>
                <span v-if="row.assist_user?.id" class="info-block__minor">
                  (ID: {{ row.assist_user.id }})
                </span>
              </div>
              <div>
                <span class="info-block__label">区域：</span>
                <span>{{ row.region?.name || "-" }}</span>
              </div>
              <div class="audit-status">
                <span class="info-block__label">审核状态：</span>
                <el-tag
                  size="small"
                  effect="plain"
                  :type="auditStatusTag(row.audit_status)"
                >
                  {{ auditStatusLabel(row.audit_status) }}
                </el-tag>
              </div>
              <div v-if="row.audit_remark" class="info-block__remark">
                <span class="info-block__label">审核备注：</span>
                <el-tooltip
                  placement="top"
                  effect="light"
                  :content="row.audit_remark"
                >
                  <span class="remark-text">{{ row.audit_remark }}</span>
                </el-tooltip>
              </div>
              <div class="info-block__minor">
                审核时间：{{ row.audit_time || "-" }}
              </div>
              <div>
                <span class="info-block__label">关联订单：</span>
                <span>{{ row.order_no || "-" }}</span>
              </div>
              <div class="info-block__minor">
                创建时间：{{ row.create_time || "-" }}
              </div>
            </div>
          </template>

          <template #status="{ row }">
            <el-tag
              :type="statusTagType(row.status)"
              size="small"
              effect="plain"
            >
              {{ row.status_label || "-" }}
            </el-tag>
          </template>
        </PureTable>
      </template>
    </PureTableBar>
  </div>
</template>

<style scoped>
.verify-stock-page {
  padding: 12px 12px 20px;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 12px;
}

.cell-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cell-group__title {
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.cell-group__meta {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.5;
}

.info-block__label {
  color: var(--el-text-color-secondary);
  margin-right: 4px;
}

.info-block__minor {
  font-size: 12px;
  color: var(--el-text-color-placeholder);
}

.info-block__remark {
  display: flex;
  align-items: center;
  gap: 4px;
}

.remark-text {
  max-width: 220px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.audit-status {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>
